<template>
  <a-card :body-style="{ padding: '24px 48px' }" :bordered="false">
    <a-collapse defaultActiveKey="1">
      <a-collapse-panel key="1">
        <h2 slot="header" class="scheduling-title">调度效果预测</h2>

        <a-form :form="form">
          <a-row :gutter="14">
            <a-col :span="9">
              <a-form-item
                label="调度对象"
                :labelCol="{ sm: 8 }"
                :wrapperCol="{ span: 16 }"
              >
                <a-select
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placeholder="请选择数据中心"
                  v-decorator="['datacenter', decoratorOptions.datacenter]"
                >
                  <a-select-option
                    v-for="d in datacenterList"
                    :key="d.id"
                    :value="d.id"
                  >
                    {{ d.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item>
                <a-select
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  :disabled="!form.getFieldValue('datacenter')"
                  placeholder="请选择云平台资源"
                  v-decorator="['resource', decoratorOptions.resource]"
                >
                  <a-select-option
                    v-for="d in cloudResourceList"
                    :key="d.id"
                    :value="d.id"
                  >
                    {{ d.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item>
                <a-select
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  :disabled="!form.getFieldValue('resource')"
                  placeholder="请选择应用"
                  v-decorator="['app', decoratorOptions.app]"
                >
                  <a-select-option
                    v-for="d in appList"
                    :key="d.id"
                    :value="d.id"
                  >
                    {{ d.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="14">
            <a-col :span="9">
              <a-form-item
                label="调度目标"
                :labelCol="{ span: 8 }"
                :wrapperCol="{ span: 16 }"
              >
                <a-select
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placeholder="请选择数据中心"
                  v-decorator="[
                    'datacenterTarget',
                    decoratorOptions.datacenterTarget,
                  ]"
                >
                  <a-select-option
                    v-for="d in targetDatacenterList"
                    :key="d.id"
                    :value="d.id"
                  >
                    {{ d.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="14">
            <a-col :span="14">
              <a-form-item
                label="选择模型"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 14 }"
              >
                <a-radio-group
                  v-decorator="[
                    'modelType',
                    {
                      initialValue: 'DATACENTER_COST',
                      rules: [{ required: true, message: '请选择模型' }],
                    },
                  ]"
                  v-for="option in modelTypeMap"
                  :key="option.key"
                >
                  <a-radio :value="option.key">
                    {{ option.label }}
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>

          <a-button
            style="float: right; padding: 0 45px"
            type="primary"
            @click="forecastEffect"
          >
            效果预测
          </a-button>

          <div style="clear: both" />
        </a-form>
      </a-collapse-panel>
    </a-collapse>

    <div class="analusis-wrapper">
      <div class="analysis-header">
        <a-row :gutter="[16, 25]">
          <a-col :span="4"></a-col>
          <a-col :span="16" style="text-align: center">
            <span
              class="progress-tips"
              style="background-color: rgb(34, 200, 252)"
            ></span>
            预测值
            <span
              class="progress-tips"
              style="background-color: rgb(254, 148, 1); margin-left: 40px"
            ></span>
            实际值
          </a-col>
          <a-col :span="3">偏差分析</a-col>
        </a-row>
      </div>
      <a-spin :spinning="confirmLoading">
        <template v-if="resultDetail && resultDetail.factors">
          <div class="analysis-body">
            <a-row
              :gutter="[16, 25]"
              v-for="(d, i) in resultDetail.factors"
              :key="i"
            >
              <a-col :span="4" style="text-align: right">
                {{ d.factorName + "：" }}
              </a-col>
              <a-col :span="16" style="text-align: center; min-width: 500px">
                <span
                  class="progress-text"
                  style="color: rgb(34, 200, 252); text-align: right"
                >
                  {{ parseFloat(d.imagine).toFixed(2) + " " + d.unit }}
                </span>
                <div
                  style="display: inline-block; width: 300px; margin: 0 10px"
                >
                  <div
                    class="progress-block progress-block-blue marginBottom2PX"
                    :style="d.imagineWidth"
                  ></div>
                  <div
                    class="progress-block progress-block-orange"
                    :style="d.beforeWidth"
                  ></div>
                </div>
                <span
                  class="progress-text"
                  style="color: rgb(254, 148, 1); text-align: left"
                >
                  {{ parseFloat(d.before).toFixed(2) + " " + d.unit }}
                </span>
              </a-col>
              <a-col :span="3">
                <template v-if="d.imagine < d.before">
                  <div style="color: rgb(48, 183, 53)">
                    {{
                      Math.abs(parseFloat(d.imagine - d.before)).toFixed(2) +
                      " " +
                      d.unit
                    }}
                    <a-icon type="arrow-down" />
                  </div>
                </template>
                <template v-else>
                  <div style="color: rgb(188, 71, 57)">
                    {{
                      Math.abs(parseFloat(d.imagine - d.before)).toFixed(2) +
                      " " +
                      d.unit
                    }}
                    <a-icon type="arrow-up" />
                  </div>
                </template>
              </a-col>
            </a-row>
          </div>
        </template>
        <template v-else>
          <a-row>
            <a-col :span="24">
              <a-empty />
            </a-col>
          </a-row>
        </template>
      </a-spin>
    </div>
  </a-card>
</template>

<script>
import { randomNum } from "@/utils/util";
import { gPostAction } from "@/api/manage";

export default {
  name: "F030204",
  data() {
    return {
      // form
      form: this.$form.createForm(this),
      confirmLoading: false,
      resultDetail: {},
      datacenterList: [],
      targetDatacenterList: [],
      cloudResourceList: [],
      appList: [],
      decoratorOptions: {
        datacenter: {
          rules: [{ required: true, message: "请选择数据中心" }],
          getValueFromEvent: (e) => {
            this.loadCloudResource(e);
            return e;
          },
        },
        datacenterTarget: {
          rules: [{ required: true, message: "请选择数据中心" }],
        },
        resource: {
          rules: [{ required: true, message: "请选择云平台资源" }],
          getValueFromEvent: (e) => {
            this.loadAppList(e);
            return e;
          },
        },
        app: {
          rules: [{ required: true, message: "请选择应用" }],
        },
      },
      modelTypeMap: [
        {
          key: "DATACENTER_COST",
          label: "成本模型",
        },
        {
          key: "DATACENTER_DEVICE",
          label: "设备模型",
        },
        {
          key: "DATACENTER_POWER",
          label: "能耗模型",
        },
        {
          key: "DATACENTER_ELECTRIC",
          label: "配电模型",
        },
      ],
    };
  },
  mounted() {
    this.resultDetail = {};
    this.loadDatacenter();
  },
  methods: {
    setWidth(valA, valB) {
      if (valA > valB) {
        return { width: "100%" };
      } else {
        return { width: randomNum(85, 95) + "%" };
      }
    },
    getPredictedVal(d) {
      let field = d.key;
      let val = this.resultDetail[field];
      if (field.indexOf("Imagine") > -1 && val < 0) {
        return "预期过低，不建议调度";
      }
      return parseFloat(this.resultDetail[d.key] || "0").toFixed(2) + d.unit;
    },
    loadDatacenter() {
      const postData = {
        pageSize: 99,
        title: "多数据中心调度-动态调度机制-调度效果预测",
        content: "查看调度效果预测页面",
      };

      gPostAction("/asset/pageDatacenter", postData).then((res) => {
        if (res.success) {
          this.datacenterList = res.data.list;
          this.targetDatacenterList = res.data.list;
        }
      });
    },
    loadCloudResource(id, isTarget) {
      this.form.setFieldsValue({
        app: undefined,
        datacenterTarget: undefined,
      });
      let list = [];
      this.datacenterList.forEach((item) => {
        if (item.id !== id) {
          list.push(item);
        }
      });
      this.targetDatacenterList = list;

      const postData = {
        datacenterId: id,
        pageSize: 99,
      };

      gPostAction("/cloud_resource/page", postData).then((res) => {
        if (res.success) {
          this.cloudResourceList = res.data.list;
          this.form.setFieldsValue({
            resource: undefined,
          });
        }
      });
    },
    loadAppList(id) {
      const postData = {
        cloudResourceId: id,
        pageSize: 99,
      };

      gPostAction("/app/page", postData).then((res) => {
        if (res.success) {
          this.appList = res.data.list;
          this.form.setFieldsValue({
            app: undefined,
          });
        }
      });
    },
    forecastEffect() {
      this.form.validateFields((error, values) => {
        if (!error) {
          this.confirmLoading = true;
          const postData = {
            appId: this.form.getFieldValue("app"),
            datacenterId: this.form.getFieldValue("datacenterTarget"),
            modelType: this.form.getFieldValue("modelType"),
          };

          gPostAction("/scheduler/scheduler_effect_prediction", postData)
            .then((res) => {
              if (res.success) {
                this.resultDetail = res.data;
                if (
                  this.resultDetail.factors &&
                  this.resultDetail.factors.length
                ) {
                  this.resultDetail.factors.forEach((d) => {
                    if (d.imagine > d.before) {
                      d.imagineWidth = { width: "100%" };
                      d.beforeWidth = { width: (d.before / d.imagine) * 100 + "%" };
                    } else {
                      d.imagineWidth = { width: (d.imagine / d.before) * 100 + "%" };
                      d.beforeWidth = { width: "100%" };
                    }
                  });
                }
              }
            })
            .finally(() => {
              this.confirmLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style
  lang="less"
  scoped
>
.scheduling-title {
  margin-bottom: 0;
  color: #000000;
  font-size: 18px;
}

.marginBottom2PX {
  margin-bottom: 2px;
}

/deep/ .ant-progress-success-bg {
  background-image: linear-gradient(
    to right,
    rgb(6, 238, 237),
    rgb(34, 200, 252)
  );
}

.progress-text {
  display: inline-block;
  font-size: 16px;
  position: relative;
  bottom: 3px;
  width: 100px;
}

.progress-block-blue {
  background-image: linear-gradient(
    to right,
    rgb(6, 238, 237),
    rgb(34, 200, 252)
  );
}

.progress-block-orange {
  background-image: linear-gradient(
    to right,
    rgb(248, 189, 1),
    rgb(254, 148, 1)
  );
}

.progress-block {
  border-radius: 5px;
  /* border: 2px solid rgb(75, 118, 180); */
  height: 10px;
}

.progress-tips {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 7px;
  vertical-align: middle;
}

.analusis-wrapper {
  margin-top: 48px;
  width: 100%;

  .analysis-body {
    /deep/ .ant-progress-show-info .ant-progress-outer {
      padding-right: 0;
    }

    .analysis-progress-left {
      display: inline-block;
    }

    .analysis-progress-right {
      display: inline-block;
    }

    .analysis-progress {
    }
  }
}
</style>